function ButtonGroupClick() {
    number = number + 1
    order_num = order_num + 1
    imgNumber = imgNumber + 1
    custom.push({number: number, order_num: order_num, type: 1})
    for (let index in custom) {
        if (custom[index].number == number) {
            custom[index].ionrange_1 = 0
            custom[index].ionrange_2 = 100
            custom[index].ionrange_3 = 200
            custom[index].img = []
            var imgList1 = {imgNumber: 1, imgeSrc: '', urlType: 0, urlId: 0, urlTitle: ''}
            var imgList2 = {imgNumber: 2, imgeSrc: '', urlType: 0, urlId: 0, urlTitle: ''}
            var imgList3 = {imgNumber: 3, imgeSrc: '', urlType: 0, urlId: 0, urlTitle: ''}
            var imgList4 = {imgNumber: 4, imgeSrc: '', urlType: 0, urlId: 0, urlTitle: ''}
            custom[index].img.push(imgList1)
            custom[index].img.push(imgList2)
            custom[index].img.push(imgList3)
            custom[index].img.push(imgList4)
        }
    }
    var html = ' <div class="form-group draggable dropped ui-draggable" id="dropped_' + number + '" data-number="' + number + '">\n' +
       ' <div class="ButtonGroup">\n' +
        '                                            <div class="ButtonGroupBox">\n' +
        '                                                <img class="ImgClIds" style="width: 50px; height: 50px;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3708632311,206931240&fm=26&gp=0.jpg" alt="">\n' +
        '                                                <div id="Shoiung" class="ButtonGroupMargin">按钮文字1</div>\n' +
        '                                            </div>\n' +
        '                                            <div class="ButtonGroupBox">\n' +
        '                                                <img class="ImgClIds" style="width: 50px; height: 50px;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3708632311,206931240&fm=26&gp=0.jpg" alt="">\n' +
        '                                                <div id="Shoiung1" class="ButtonGroupMargin">按钮文字2</div>\n' +
        '                                            </div>\n' +
        '                                            <div class="ButtonGroupBox">\n' +
        '                                                <img class="ImgClIds" style="width: 50px; height: 50px;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3708632311,206931240&fm=26&gp=0.jpg" alt="">\n' +
        '                                                <div id="Shoiung2" class="ButtonGroupMargin">按钮文字3</div>\n' +
        '                                            </div>\n' +
        '                                            <div class="ButtonGroupBox">\n' +
        '                                                <img class="ImgClIds" style="width: 50px; height: 50px;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3708632311,206931240&fm=26&gp=0.jpg" alt="">\n' +
        '                                                <div id="Shoiung3" class="ButtonGroupMargin">按钮文字4</div>\n' +
        '                                            </div>\n' +
        '                                        </div>\n' +
    '        </div>'
    var img = $('#field_image').html()
    //隐藏所有
    $('#sortable_leve').find('div[class="level_number"]').css("display", "none")
    var level = '<div class="level_number" style="width: 90%; position: relative" id="level_' + number + '" data-number="' + number + '">\n' +
        '<i style="position: absolute;right:-70px; top:-9px;font-size: 25px; cursor: pointer" class="fa fa-times LunboListClick"></i>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>上边距</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_1" data-number="' + number + '" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>宽度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_2" data-number="' + number + '" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>图片高度</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_3" data-number="' + number + '"></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>图片宽度</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_4" data-number="' + number + '"></div>\n' +
        '                            <div id="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+1+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+1+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '<div style="display: flex;justify-content: start; margin-top: 10px; align-items: center">\n' +
        '            <span style="font-size: 15px;color:#555; margin-right: 5px">按钮文字1：</span>\n' +
        '            <input id="Qinshangpin" style="max-width: 40%;" type="text" class="form-control" placeholder="按钮文字1" />\n' +
        '        </div>\n' +
        '        <div style="display: flex;justify-content: start; margin-top: 10px;  align-items: center">\n' +
        '            <span style="font-size: 15px;color:#555; margin-right: 5px">按钮文字2：</span>\n' +
        '            <input id="Qinshangpin1" style="max-width: 40%;" type="text" class="form-control" placeholder="按钮文字2" />\n' +
        '        </div>\n' +
        '        <div style="display: flex;justify-content: start; margin-top: 10px;  align-items: center">\n' +
        '            <span style="font-size: 15px;color:#555; margin-right: 5px">按钮文字3：</span>\n' +
        '            <input id="Qinshangpin2" style="max-width: 40%;" type="text" class="form-control" placeholder="按钮文字3" />\n' +
        '        </div>\n' +
        '        <div style="display: flex;justify-content: start; margin-top: 10px;  align-items: center">\n' +
        '            <span style="font-size: 15px;color:#555; margin-right: 5px">按钮文字4：</span>\n' +
        '            <input id="Qinshangpin3" style="max-width: 40%;" type="text" class="form-control" placeholder="按钮文字4" />\n' +
        '        </div>\n' +
        '        <div style="display: flex;justify-content: start; margin-top: 10px;  align-items: center">\n' +
        '            <span style="font-size: 15px;color:#555; margin-right: 5px">图片角度：</span>\n' +
        '            <span id="normalId" style="font-size: 15px;color:#555; margin-right: 5px; cursor: pointer; border: 1px solid #f1f1f1;padding: 3px 9px;">正常</span>\n' +
        '            <span id="normaBanlId" style="font-size: 15px;color:#555; margin-right: 5px; cursor: pointer; border: 1px solid #f1f1f1;padding: 3px 9px; margin: 0 12px">半圆</span>\n' +
        '            <span id="semicircleId"style="font-size: 15px;color:#555; margin-right: 5px; cursor: pointer; border: 1px solid #f1f1f1;padding: 3px 9px;">通圆</span>\n' +
        '        </div>\n' +
        '                            </div>\n' +
        '                        </div>'

    $('#sortable').append(html);
    $('#sortable_leve').append(level)
    $('#normalId').click(function () {
        $('.ImgClIds').css('border-radius', '0')
    })
    $('#semicircleId').click(function () {
        $('.ImgClIds').css('border-radius', '100px')
    })
    $('#normaBanlId').click(function () {
        $('.ImgClIds').css('border-radius', '15px')
    })
    $("#Qinshangpin").bind("input propertychange",function(event){
        if($("#Qinshangpin").val() == ''){
            x.innerHTML = '按钮文字1'
        }else{
            x = document.getElementById("Shoiung")
            x.innerHTML = $("#Qinshangpin").val()
        }
    });
    $("#Qinshangpin1").bind("input propertychange",function(event){
        if($("#Qinshangpin1").val() == ''){
            x.innerHTML = '按钮文字2'
        }else{
            x = document.getElementById("Shoiung1")
            x.innerHTML = $("#Qinshangpin1").val()
        }
    });
    $("#Qinshangpin2").bind("input propertychange",function(event){
        if($("#Qinshangpin2").val() == ''){
            x.innerHTML = '按钮文字3'
        }else{
            x = document.getElementById("Shoiung2")
            x.innerHTML = $("#Qinshangpin2").val()
        }
    });
    $("#Qinshangpin3").bind("input propertychange",function(event){
        if($("#Qinshangpin3").val() == ''){
            x.innerHTML = '按钮文字4'
        }else{
            x = document.getElementById("Shoiung3")
            x.innerHTML = $("#Qinshangpin3").val()
        }
    });

    $(".ionrange_1").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 0,
        onChange: function (obj) {
            $("#dropped_" + obj.input.context.dataset.number + "").find("img").css("margin-top", obj.fromNumber)
            for (let index in custom) {
                if (custom[index].number == obj.input.context.dataset.number) {
                    custom[index].ionrange_1 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_2").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        from: 100,
        onChange: function (obj) {
            $("#dropped_" + obj.input.context.dataset.number + "").css("width", obj.fromNumber + "%")
            for (let index in custom) {
                if (custom[index].number == obj.input.context.dataset.number) {
                    custom[index].ionrange_2 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_3").ionRangeSlider({
        min: 0,
        max: 1000,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 200,
        onChange: function (obj) {
            $("#dropped_" + obj.input.context.dataset.number + "").find("img").css("height", obj.fromNumber + "px")
            for (let index in custom) {
                if (custom[index].number == obj.input.context.dataset.number) {
                    custom[index].ionrange_3 = obj.fromNumber
                }
            }
        }
    });
    $(".ionrange_4").ionRangeSlider({
        min: 0,
        max: 1000,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 200,
        onChange: function (obj) {
            $("#dropped_" + obj.input.context.dataset.number + "").find("img").css("width", obj.fromNumber + "px")
            for (let index in custom) {
                if (custom[index].number == obj.input.context.dataset.number) {
                    custom[index].ionrange_3 = obj.fromNumber
                }
            }
        }
    });
}
